<script lang="ts" setup>
import { urls, getListByConditions, insertOne, updateOne } from '@/index';
import type { Permission } from '@/index.d';
import { useRequest } from 'vue-request';

const title = '权限';

// 用于控制卡片内表格的高度
const props = defineProps({ height: Number });

const tableHeight = computed<number>(() => {
  const height = props.height as number;
  return height - 37 - 20 - 55;
});

const currentMenu = defineModel('currentMenu', { type: Object, required: true });

// 新增按钮文字时临时存储的值
const buttonTextForInserted = ref<string>('');

// 更新按钮文字时临时存储的值
const buttonTextForTransfer = ref<string>('');

const currentPermission = reactive<{
  id: number;
  menuTitle?: string;
  fullPath?: string;
  text?: string;
}>({
  id: 0,
  menuTitle: currentMenu.value.title,
  fullPath: currentMenu.value.fullPath
});

const getPermissionListPromise = async () =>
  getListByConditions<Permission>(urls.permission, { menuTitle: currentMenu.value.title });

const {
  data: permissionList,
  run: getPermissionList,
  loading
} = useRequest(getPermissionListPromise);

watch(
  () => currentMenu.value.title,
  () => {
    currentPermission.id = 0;
    currentPermission.text = undefined;
    currentPermission.menuTitle = currentMenu.value.title;
    currentPermission.fullPath = currentMenu.value.fullPath;
    getPermissionList();
  }
);

const handleRowClick = (row: any) => {
  currentPermission.id = row.id as number;
  currentPermission.text = row.text as string;
  buttonTextForTransfer.value = row.text as string;
};

const canInsert = computed<Boolean>(() => {
  if (buttonTextForInserted.value === '') {
    return false;
  }
  return !permissionList.value?.some(
    (ele: { text: string }) => ele.text === buttonTextForInserted.value
  );
});

//插入按钮是否可用
const handleInsertPermission = async () => {
  buttonTextForInserted.value === '' && ElMessage({ type: 'error', message: '输入的按钮文字为空' });
  const newPermission: Permission = {
    menuTitle: currentPermission.menuTitle as string,
    fullPath: currentPermission.fullPath as string,
    text: buttonTextForInserted.value
  };
  const res = await insertOne(urls.permission, newPermission);
  res && getPermissionList();
};

//更新按钮是否可用
const canUpdate = computed<Boolean>(() => {
  if (
    currentPermission.id === 0 ||
    currentPermission.text === buttonTextForTransfer.value ||
    currentPermission.text === ''
  ) {
    return false;
  }

  return !permissionList.value?.some(
    (ele: { text: string }) => ele.text === currentPermission.text
  );
});

const handleUpdateButton = async () => {
  const res = await updateOne(urls.permission, currentPermission);
  if (res) {
    buttonTextForTransfer.value = currentPermission.text as string;
    getPermissionList();
  }
};
</script>
<template>
  <el-form inline label-suffix="：">
    <el-form-item label="新增权限" v-button="'新增权限'">
      <el-input v-model="buttonTextForInserted" clearable placeholder="请输入权限的名称" />
    </el-form-item>
    <el-form-item v-button="'新增权限'">
      <el-button type="success" @click="handleInsertPermission" :disabled="!canInsert">
        新增权限
      </el-button>
    </el-form-item>
    <el-form-item label="修改权限" v-button="'修改权限'">
      <el-input
        v-model="currentPermission.text"
        clearable
        placeholder="请输入权限的名称"
        :readonly="currentPermission.id === 0"
      />
    </el-form-item>
    <el-form-item v-button="'修改权限'">
      <el-button type="warning" @click="handleUpdateButton" :disabled="!canUpdate">
        修改权限
      </el-button>
    </el-form-item>
  </el-form>
  <hq-table
    :height="tableHeight"
    :data="permissionList"
    :loading
    :title
    :base-url="urls.permission"
    operate-column
    @handle-row-click="handleRowClick"
    @handleReload="getPermissionList"
  >
    <template #columns>
      <hq-table-column prop="menuTitle" label="导航菜单" />
      <hq-table-column prop="text" label="按钮文字" />
    </template>
  </hq-table>
</template>

<style lang="scss" scoped>
.el-form {
  display: flex;

  > * {
    flex: 1;

    .el-button {
      width: 100%;
    }
  }
}
</style>
